<template>
  <div class="flodpanel2">
    <m-header modile-title="折叠面板2" go-back="true"></m-header>
    <div class="newslist">
      <ul>
        <li class="news_li" v-for="(item,index) in newslist" :key="index">
          <div class="news_title">
            <p class="p" ref="liCon">{{item.title}}</p>
            <div class="open" @click="open(item,index)">
              <p v-if="!item.showContent">【展开】</p>
              <p v-if="item.showContent">【收缩】</p>
            </div>
          </div>
          <div class="news_list" v-for="(item2,index2) in item.childs" v-show="item.showContent">
            <p>{{item2.content}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    import mHeader from '../../../../components/header'
    export default {
        name: "FoldPanel2",
        data(){
            return{
              newslist:[],
              liConHeight: 50 // 两行文字的高度
            }
        },
        created(){
          this.getlistDate()
        },
        methods:{
          getlistDate() {
            this.$http.get('../static/fold.json').then(res => {
              if (res.status === 200) {
                this.newslist = res.data
                // console.log(this.newslist)
              }
            })
          },
          open(item,i){
            const liCon = this.$refs.liCon[i]
            var height = liCon.offsetHeight
            if (height === this.liConHeight) { // 展开
              liCon.style.height = 'auto'
              height = liCon.offsetHeight
              liCon.style.height = this.liConHeight + 'px'
              var f = document.body.offsetHeight // 必加
              liCon.style.height = height + 'px'
            } else { // 收缩
              liCon.style.height = this.liConHeight + 'px'
            }
            item.showContent = !item.showContent
          }
        },
        components:{
          mHeader
        }
    }
</script>

<style lang="scss" scoped>
.flodpanel2{
  padding-top: 60px;
  .newslist{
    ul{
      .news_li{
        width: 100%;
        .news_title{
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          background: #ffffff;
          p{
            font-size: 18px;
            color: #555;
            line-height: 70px;
            height: 70px;
            overflow: hidden;
            transition: height .3s;
            margin-left: 10px;
          }
          .open{
            /*line-height: ;*/
          }
        }
        .news_list{
          width: 100%;
        }
      }
    }
  }
}
</style>
